<!--
 * @Author: 王灿
 * @Date: 2019-11-26 20:43:08
 * @LastEditTime: 2019-12-12 19:30:58
 * @Description: 首页早报操作
 * @FilePath: /jq_management/src/views/configure/configure-newspaper/newspaper-operate/index.vue
 -->
 <template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item style="margin-top: 15px;" prop="propertyName">
          <el-input v-model="ruleForm.propertyName" placeholder="首页早报标题" clearable></el-input>
      </el-form-item>
      <el-form-item style="margin: 15px 0" prop="remark">
          <el-input v-model="ruleForm.remark" placeholder="首页早报备注" clearable></el-input>
      </el-form-item>
      <el-form-item prop="propertyValue">
        <!-- 富文本 -->
        <div class="el-form__quill">
          <jq-tinymce
            ref="editor"
            v-model="ruleForm.propertyValue"
            :isUpdate="isUpdate"
            :minHeight="270"
            @input="onGetEditorValue"
          />
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
      <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import JqUpload from '@/components/jq-upload/index.vue'
import JqTinymce from '@/components/jq-tinymce/index.vue'
import { getPropertyAdd, getPropertyUpdate } from '@/api/configure.js'
export default {
  name: 'NewspaperOperate',
  components: { JqUpload, JqTinymce},
  props: {
    // 默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        type: 13,
        propertyName: '',
        remark: '',
        propertyValue: ''
      },
      rules: {
        propertyName: [{ required: true, message: '请输入早报标题', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入早报备注', trigger: 'blur' }],
        propertyValue: [{ required: true, message: '请输入早报内容', trigger: 'blur' }]
      },
      isUpdate: false
    }
  },
  watch: {
    // 获取默认数据
    row() {
      this.isUpdate = false
      this.onGetRow()
    }
  },
  created() {
    this.onGetRow()
  },
  methods: {
    // 默认数据
    onGetRow() {
      let boolean = JSON.stringify(this.row) !== '{}'
      this.ruleForm.id = boolean ? this.row.id : ''
      this.ruleForm.propertyName = boolean ? this.row.propertyName : ''
      this.ruleForm.remark = boolean ? this.row.remark : ''
      this.ruleForm.propertyValue = boolean ? this.row.propertyValue : ''
    },
    // 赋值富文本
    onGetEditorValue(data) {
      this.isUpdate = true
      this.ruleForm.propertyValue = data
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.row.id) {
            // 编辑
            getPropertyUpdate(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '编辑成功'
              })
              this.onRefresh()
            })
          } else {
            // 新增
            getPropertyAdd(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '创建成功'
              })
              this.onRefresh()
            })
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false, isRefresh: false }
      this.$emit('onCancelBtn', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onCancelBtn', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form__quill {
    width: 100%;
    margin-top: 10px;
}
</style>
